import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import { useRecoilValue } from 'recoil';
import { updateSiteInfo } from '../../api';
import { ISiteInfo } from '../../interface';
import { siteInfo } from '../../recoil/atoms/siteInfo';

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 8 },
};
const tailLayout = {
  wrapperCol: { offset: 2, span: 4 },
  labelCol: { span: 4 },
};

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 8, offset: 2 },
  },
};
export default function BasicInfo() {
  const [form] = Form.useForm();
  const siteBasicInfo = useRecoilValue(siteInfo); /* 取到 recoil 状态中的网站信息 */
  const id = siteBasicInfo.id;  /* 拿到网站信息的id */

  // 提交表单的点击事件
  const onFinish = (values: ISiteInfo) => {
    // 将表单数据和ID 整理成一个新的对象
    const newObj = { ...values, id }
    // 发起修改请求
    updateSiteInfo(newObj).then(() => {
      message.success('修改成功')
    }).catch(() => {
      message.error('修改信息失败')
    })
    // 重置表单为初始值, 初始值默认为空
    form.resetFields();
  };

  // 重置表单事件, 将表单所有项置为空
  const onReset = () => {
    form.resetFields();
  };

  return (
    <div className='pt-[20px] px-0 pb-[10px]'>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          label="公司名称"
          name="companyName"
          rules={[{ required: true, message: '请输入公司名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="公司备案号"
          name="siteNo"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="公司联系电话"
          name="contactTel"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="公司地址"
          name="address"
        >
          <Input />
        </Form.Item>
        <Form.List
          name="tag"
          rules={[
            {
              validator: async (_, names) => {
                if (!names || names.length < 1) {
                  return Promise.reject(new Error('请最少输入一个岗位'));
                }
              },
            },
          ]}
        >
          {(fields, { add, remove }, { errors }) => (
            <>
              {fields.map((field, index) => (
                <Form.Item
                  {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                  label={index === 0 ? '岗位' : ''}
                  required={false}
                  key={field.key}
                >
                  <Form.Item
                    {...field}
                    validateTrigger={['onChange', 'onBlur']}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: "请输入要添加的岗位名称或者删除岗位名称",
                      },
                    ]}
                    noStyle
                  >
                    <Input placeholder="请输入您要添加的岗位" className="w-[60%]" />
                  </Form.Item>
                  {fields.length > 1 ? (
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      onClick={() => remove(field.name)}
                    />
                  ) : null}
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  className="w-[60%] ml-[25%]"
                  icon={<PlusOutlined />}
                >
                  添加岗位
                </Button>
                <Form.ErrorList errors={errors} />
              </Form.Item>
            </>
          )}
        </Form.List>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" className='mr-[8px]'>
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
